{% extends 'ApplicationToolsBundle::layout12.html.twig' %}

{% block title %}Slider Bootstrap Animation{% endblock %}

{% block stylesheets %}    
    <link href="{{ asset('bundles/applicationtools/css/bootstrap/carousel.css') }}" rel="stylesheet" type="text/css" media="all" />
    <link href="{{ asset('bundles/applicationtools/css/animate/animate.css') }}" rel="stylesheet" type="text/css" media="all" />
    <style type="text/css">
        .carousel{
            margin-left: -1%;
            margin-right: -1%;
        }
    </style>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/applicationtools/js/bootstrap/bootstrap.min.js') }}" type="text/javascript"></script>
    <script type="text/javascript">
        //$('.carousel').carousel();
    </script>
{% endblock %}

{% block body %}

    <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      
      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="{{ asset('bundles/applicationtools/images/1903x500.png') }}" title="First slide" alt="First slide" />
          <!-- <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:First slide" alt="First slide"> -->
          <div class="container">
            <div class="carousel-caption">
              <h1 class="fadeInUp animated">Example headline.</h1>
              <p class="fadeInUp animated">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p class="fadeInRight animated"><a class="btn btn-large btn-primary" href="#">Sign up today</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <!-- <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Second slide" alt="Second slide"> -->
          <div class="container">
            <div class="carousel-caption">
              <h1 class="fadeInLeftBig animated">Another example headline.</h1>
              <p class="fadeInRightBig animated">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p class="fadeInDownBig animated"><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <!-- <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Third slide" alt="Third slide"> -->
          <div class="container">
            <div class="carousel-caption">
              <h1 class="fadeInRightBig animated">One more for good measure.</h1>
              <p class="fadeInLeftBig animated">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p class="fadeInUpBig animated"><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left">&#65513;</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right">&#65515;</span>
      </a>
    </div>
    
<div class="grid_row">
	<div class="grid_12">
	
	Do działania wykorzystałem rotator bootstrap oraz animation.css ze strony
	<a herf="https://github.com/daneden/animate.css" target="_blank">https://github.com/daneden/animate.css</a> (rozwiązanie nie korzysta z js).
	<br/>
	<b>UWAGA!</b> Korzystając z innych klas niż w przykładzie należy pamiętać o dopisaniu klasy <b>.active</b> przed klasą np. <b>.fadeInDownBig</b> oraz dodaniu własności <b>visibility: visible;</b> oraz <b>visibility: hidden;</b> przy ukrytym oknie rotatora.
	<p>Aby komórki miały przejście fade do klasy dodano klase "carousel slide <b>carousel-fade</b>"</p>
	</div>
</div>

{% endblock %}